<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <title></title>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link href="../bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../bootstrap-select-1.13.14/dist/css/bootstrap-select.css">
    <link rel="stylesheet" href="../toastr/toastr.min.css">
    <link rel="stylesheet" href="../bootstrapvalidator-aae9288/dist/css/bootstrapValidator.css">
    <title>客户订单</title>

</head>
<body>
        <div class="row" id="tableToolBar">
            <button type="button" class="btn btn-info" id="addBtn">添加客户</button>
            <button  type="button" class="btn btn-danger" id="deleteMoreBtn">批量删除</button>
        </div>

        <!--删除模态框-->
        <div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"
                                data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            客户信息</h4>
                    </div>
                    <div class="modal-body" id="deleteDialogMsg">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" id="deleteBtn">
                            删除
                        </button>
                    </div>
                </div><!-- /.modal-content --></div>
        </div>
        <!--添加和编辑模态框-->
        <div class="modal fade" id="MyModalforAddandEdit" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabelTitle">
                            办理入住
                        </h4>
                    </div>
                    <div class="modal-body" id="TipForAddandEdit">
                        <form id="ForAddandEditForm">
                            <div class="form-group">
                                <label class="control-label hidden">客户编号</label>
                                    <input type="text" class="form-control hidden" id="guest_id">
                            </div>
                            <div class="form-group">
                                <label for="guest_name">姓名</label>
                                <input type="text" class="form-control" id="guest_name" name="guest_name" placeholder="请输入姓名">
                            </div>
                            <div class="form-group">
                                <label for="guest_idcard">身份证</label>
                                <input type="text" class="form-control" id="guest_idcard" name="guest_idcard" placeholder="请输入身份证">
                            </div>
                            <div class="form-group">
                                <label for="guest_phone">电话</label>
                                <input type="text" class="form-control" id="guest_phone" name="guest_phone" placeholder="请输入电话">
                            </div>
                            <div class="form-group">
                                <label for="guest_roomid">房间号</label>
                                <input type="text" class="form-control" id="guest_roomid" name="guest_roomid" placeholder="请输入房间号">
                            </div>
                            <div class="text-right">
                                <span id="returnMessage" class="glyphicon"> </span>
                                <button type="button" class="btn btn-default right" data-dismiss="modal">关闭</button>
                                <button id="addorEditBtn" type="button" class="btn btn-primary">办理</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <table id="data-table"></table>
    <script src="../jquery/jquery-3.5.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../bootstrap-select-1.13.14/dist/js/bootstrap-select.js"></script>
    <script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="../toastr/toastr.min.js"></script>
    <script src="../jquery-validation/jquery.validate.js"></script>
    <script src="../jquery-validation/messages_zh.js"></script>
    <script src="../bootstrapvalidator-aae9288/dist/js/bootstrapValidator.js"></script>
    <script src="../bootstrapvalidator-aae9288/dist/js/language/zh_CN.js"></script>
        <script>
            var guest_ids=[];
            $(document).ready(function () {


                initTable();
                function initTable() {
                    //让bookstraptable销毁
                    $("#data-table").bootstrapTable("destroy");
                    $("#data-table").bootstrapTable({
                        url: "/guest/selectAllGuest",
                        method: 'post', //请求方式（*）
                        toolbar: '#addBtn,#deleteMoreBtn',            //工具按钮用哪个容器
                        striped: true, //是否显示行间隔色
                        cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                        pagination: true, //是否显示分页（*）
                        sortable: true, //是否启用排序
                        sortOrder: "asc", //排序方式
                        sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
                        pageNumber: 1, //初始化加载第一页，默认第一页,并记录
                        pageSize: 8, //每页的记录行数（*）
                        pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
                        search: true, //是否显示表格搜索,模糊查询
                        strictSearch: false,//精确查询
                        // silent : true,// 刷新事件必须设置
                        showColumns: true, //是否显示所有的列（选择显示的列）
                        showRefresh: true, //是否显示刷新按钮
                        minimumCountColumns: 2, //最少允许的列数
                        clickToSelect: true, //是否启用点击选中行
                        //height: 1000,                      //表格高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                        uniqueId: "id", //每一行的唯一标识，一般为主键列
                        showToggle: false, //是否显示详细视图和列表视图的切换按钮
                        cardView: false, //是否显示详细视图
                        detailView: false, //是否显示父子表
                        clickToSelect: true,    //是否启用点击选中行
                        // queryParams: queryParams,
                        columns: [

                            {
                                checkbox: true,

                            },
                            // {
                            //     field: 'guest_id',//JSon数据中的相应的key
                            //     title: '客户编号',//表头信息
                            //     sortable: true,
                            //
                            //     align: 'center',
                            //     valign: 'middle',
                            //},
                            {
                                field: 'guest_name',//JSon数据中的相应的key
                                title: '客户姓名',//表头信息
                                sortable: true,

                                align: 'center',
                                valign: 'middle',
                            },
                            {
                                field: 'guest_idcard',
                                title: '身份证号',
                                sortable: true,

                                align: 'center',
                                valign: 'middle',

                            },
                            {
                                field: 'guest_phone',
                                title: '手机号',
                                sortable: true,

                                align: 'center',
                                valign: 'middle',
                            },
                            {
                                field: 'room_id',
                                title: '房间号',
                                align: 'center',
                                sortable: true,
                                valign: 'middle',
                            },
                            {
                                field: 'guest_checkintime',
                                title: '入住时间',

                                align: 'center',
                                sortable: true,
                                valign: 'middle',
                            },
                            {
                                field: 'guest_checkouttime',
                                title: '退房时间',

                                align: 'center',
                                sortable: true,
                                valign: 'middle',
                            },
                            {
                                field: 'guest_paymoney',
                                title: '支付金额',

                                align: 'center',
                                sortable: true,
                                valign: 'middle',
                            },
                            {
                                title: '操作',
                                align: 'center',
                                valign: 'middle',
                                events: operateEvents,
                                formatter: function (e,value, row, index) {
                                    return "<button class='btn btn-info updateGuest'><i class='fa fa-pencil-square-o' aria-hidden='true'></i> 编辑</button> <button class='btn btn-danger deleteGuest'> <i class='fa fa-trash' aria-hidden='true'></i> 删除</button>"
                                        ;
                                }
                            }
                        ],
                        onLoadSuccess: function (res) {
                            console.log(res);
                            //复选框的居中样式
                            $(".bs-checkbox").css({"text-align": 'center', "vertical-align": "middle"});
                        }, onLoadError: function (statusCode) {
                            return "加载失败了"
                        }, formatLoadingMessage: function () {
                            //正在加载
                            return "拼命加载中...";
                        }, formatNoMatches: function () {
                            //没有匹配的结果
                            return '无符合条件的记录';
                        }
                    });
                }

                var form = $('#ForAddandEditForm');
                form.bootstrapValidator({
                    message: '输入值不合法',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        guest_name: {
                            message: '用户名不合法',
                            validators: {
                                notEmpty: {
                                    message: '用户名不能为空'
                                },
                                stringLength: {
                                    min: 2,
                                    max: 30,
                                    message: '请输入2到30个字符'
                                }//,
                                // regexp: {
                                //     regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
                                //     message: '用户名只能由字母、数字、点、下划线和汉字组成 '
                                // }
                            }
                        }
                        , guest_idcard: {
                            validators: {
                                notEmpty: {
                                    message: '身份证不能为空'
                                }
                            }
                        }, guest_phone: {
                            validators: {
                                notEmpty: {
                                    message: '手机号不能为空'
                                },
                                regexp: {
                                    regexp: "^([0-9]{11})?$",
                                    message: '手机号码格式错误'
                                }
                            }
                        }
                    }
                });

                //添加或编辑模态框的确认按钮
                $("#addorEditBtn").click(function () {
                    var guest_id=$("#guest_id").val();
                    alert(guest_id);
                    if(guest_id!=""){
                        $.ajax(  {
                            url:"/guest/updateGuest",
                            datatype:"json",
                            type:"get",
                            data:{
                                guest_id: guest_id,
                                guest_name:$("#guest_name").val(),
                                guest_idcard:$("#guest_idcard").val(),
                                guest_phone: $("#guest_phone").val(),
                                guest_roomid: $("#guest_roomid").val(),
                            },
                            success:function (result) {
                                if(result.errorCode==0){
                                    $("#MyModalforAddandEdit").modal("hide");
                                    toastr.success(result.status);
                                }
                            }
                        })
                    }else{
                        $.ajax({
                            url:"/guest/insertGuestforGuestlist",
                            datatype:"json",
                            type:"post",
                            data:{
                                //guest_id: $("#guest_id").val(),
                                guest_name:$("#guest_name").val(),
                                guest_idcard:$("#guest_idcard").val(),
                                guest_phone: $("#guest_phone").val(),
                                guest_roomid: $("#guest_roomid").val(),
                            },
                            success: function (rs) {
                                var errorCode = rs.errorCode;
                                if (errorCode == 0) {
                                    //模态框成功后消失
                                    $("#MyModalforAddandEdit").modal("hide");
                                    //插入成功后刷新
                                    initTable();
                                    //刷新后出一个提示框
                                    toastr.success(rs.status);
                                } else {
                                    toastr.error(rs.status);
                                    $("#MyModalforAddandEdit").modal("hide");
                                }
                            }
                        })
                    }
                });
                //delete
                $("#deleteMoreBtn").click(function () {
                    //点击每一行的复选框都会将选中的行添加到数组中
                    var rows = $("#data-table").bootstrapTable("getSelections");
                    for(var i=0;i<rows.length;i++){
                        guest_ids[i]=rows[i].guest_id;
                    }
                    alert("=========="+guest_ids[0]);
                    $("#deleteDialogMsg").html("您确定要删除这"+rows.length+"间房间信息吗？");
                    $("#myDeleteModal").modal("show");
                })

                $("#deleteBtn").click(function () {
                    $.ajax({
                        url:"/guest/deleteGuest",
                        datatype:"json",
                        type:"post",
                        data:{
                            guest_id:guest_ids
                        },
                        //序列化,能够传递数组给服务器
                        traditional: true,
                        success:function (result) {
                            var errorCode = result.errorCode;
                            if(errorCode==0){
                                $("#myDeleteModal").modal("hide");
                                initTable();
                                toastr.success(result.status);
                            }else if(errorCode==-1) {
                                $("#myDeleteModal").modal("hide");
                                toastr.error(result.status);
                            }
                        }
                    })
                })


                //添加客户
                $("#addBtn").click(function () {
                    $("#guest_id").val("");
                    showModalforAddandEdit();
                });
                //退出模态框下次点开编辑 上次模态框内容清除
                $("#MyModalforAddandEdit").on('hidden.bs.modal', function () {
                    clearModelData();
                });
                //清空模态框
                function clearModelData() {
                    $("#guest_id").val("");
                    $("#guest_name").val("");
                    $("#guest_idcard").val("");
                    $("#guest_phone").val("");
                }
            });
            window.operateEvents = {
                'click .updateGuest': function (e, value, row, index) {
                    $("#guest_id").val(row.guest_id);
                    $.ajax({
                        url: "/guest/selectGuestById",
                        type: "post",
                        dataType: "json",
                        data: {
                            guest_id: row.guest_id
                        },
                        success: function (res) {
                            console.log(res);
                            if (res.errorCode == 0) {
                                showModalforAddandEdit();
                                $("#guest_id").val(res.object.guest_id)
                                $("#guest_name").val(res.object.guest_name);
                                $("#guest_idcard").val(res.object.guest_idcard);
                                $("#guest_phone").val(res.object.guest_phone);
                                $("#guest_roomid").val(res.object.guest_roomid);
                            }
                        }
                    });
                },

                //该点击事件需要将括号中的参数写全才可以显示出来
                'click .deleteGuest': function (e, value, row, index) {
                    guest_id = row.guest_id;
                    guest_ids[0] = row.guest_id;
                    $("#deleteDialogMsg").html("确定要删除" + row.guest_roomid + "这条数据吗？");
                    $("#myDeleteModal").modal("show");
                }
            };
            function showModalforAddandEdit() {
                var guest_id = $("#guest_id").val();
                if(guest_id!=""){
                    $("#myModalLabelTitle").text("编辑入住");
                    $("#addorEditBtn").text("编辑")
                    $("#MyModalforAddandEdit").modal("show");
                }else{
                    $("#myModalLabelTitle").text("添加入住");
                    $("#addorEditBtn").text("添加")
                    $("#MyModalforAddandEdit").modal("show");
                }
            }

        </script>


</body>
</html>